<template>
  <view class="roc-navbar">
    <u-navbar
      :title="title"
      :titleWidth="titleWidth"
      bgColor="#0062AD"
      :leftIcon="leftIcon"
      :leftText="leftText"
      leftIconSize="20px"
      leftIconColor="#fff"
      :rightIcon="rightIcon"
      :rightText="rightText"
      rightIconSize="20px"
      rightIconColor="#fff"
      :placeholder="true"
      :titleStyle="{
        color: '#fff'
      }"
      :autoBack="autoBack"
      @leftClick="leftClick"
      @rightClick="rightClick"
    ></u-navbar>
  </view>
</template>

<script>
export default {
  name: 'roc-navbar',
  props: {
    titleWidth: {
      type: String,
      default: '400rpx'
    },
    title: {
      type: String,
      default: ''
    },
    leftIcon: {
      type: String,
      default: 'arrow-left'
    },
    leftText: {
      type: String,
      default: ''
    },
    rightIcon: {
      type: String,
      default: ''
    },
    rightText: {
      type: String,
      default: ''
    },
    autoBack: {
      type: Boolean,
      default: true
    }
  },
	watch: {
		leftIcon(val) {
			console.log(val)
		}
	},
  methods: {
    leftClick() {
      this.$emit('leftClick')
    },
    rightClick() {
      this.$emit('rightClick')
    }
  }
};
</script>

<style></style>
